import React from "react";
// import './index.css';
import BGContainer from "../../../../../Component/BGContainer";
import TiggleBtn from "../../../../../Component/TiggleBtn";
import {Button,Input,DatePicker,Radio } from "antd";
import UpCamera from "../../../../../Component/UpCamera";
import TransactionServer from "../../../../../Server/Trade/TransactionServer";
import UserCheck from "../../../../../utils/UserCheck";

export default class extends React.Component{
    
    constructor(props){
        super();
        this.state={
            type:0,
            status:0,
            id:"",
            title:"",//标题
            describe:"",//商品描述不能为空
            aerocraftImgs:"",//无人机图片不能为空
            userId:UserCheck.GetUserID(),//userId不能为空
            aerocraftBrand:"",//品牌不能为空
            aerocraftType:"",//飞机类型不能为空
            aerocraftModel:"",//型号不能为空
            aerocraftSn:"",//SN号不能为空
            insuranceStatus:"",//有无飞行器保险不能为空  //有无飞行器保险(0 有 1无)
            cashDeposit:"",//保证金不能为空
            cashDepositProportion:"",//保证金比例不能为空
            productService:"",//产品服务不能为空
            bargain:1,//是否议价 0一口价 1可议价
            bargainProportion:"",//议价比例
            insuranceDate:"",//保险有效期
            insuranceNumber:"",//保险单号
            insuranceCompany:"",//保险公司
            mail:"",//是否包邮 0是 1不是
            price:"",//价格
            cashPledge:"",//租赁押金
            insuranceImg:"",//保险单图片
        }
    }
    StartChange(date){
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            insuranceStart:dateStr,
        });
    }
    EndChange(date){
        let dateStr=date._d.toLocaleDateString();
        dateStr=dateStr.replace(/\//g,'-');
        this.setState({
            insuranceEnd:dateStr,
        });
    }
    Commit(){
        TransactionServer.TransactionAddSecondHand(
            this.state.type,
            this.state.status,
            this.state.id,
            this.state.title,
            this.state.describe,
            this.state.aerocraftImgs,
            this.state.userId,
            this.state.aerocraftBrand,//品牌不能为空
            this.state.aerocraftType,//飞机类型不能为空
            this.state.aerocraftModel,//型号不能为空
            this.state.aerocraftSn,//SN号不能为空
            this.state.insuranceStatus,//有无飞行器保险不能为空  //有无飞行器保险(0 有 1无)
            this.state.cashDeposit,//保证金不能为空
            this.state.cashDepositProportion,//保证金比例不能为空
            this.state.productService,//产品服务不能为空
            this.state.bargain,//是否议价 0一口价 1可议价
            this.state.bargainProportion,//议价比例
            this.state.insuranceStart+'-'+this.state.insuranceEnd,//保险有效期
            this.state.insuranceNumber,//保险单号
            this.state.insuranceCompany,//保险公司
            this.state.mail,//是否包邮 0是 1不是
            this.state.price,//设备租金
            this.state.cashPledge,//租赁押金
            this.state.insuranceImg,//保险单图片
        )
        .then(res=>{
            console.log(res)
        });
    }
    ChangeDronePic(data){
        this.setState({
            aerocraftImgs:data.originFileObj
        });
    }
    ChangeCAPic(data){
        this.setState({
            insuranceImg:data.originFileObj
        });
    }
    TigglePrice(){
        let bargain=this.state.bargain;
        this.setState({
            bargain:bargain===0?1:0
        });
    }
    render(){
        return(
            <div className="Publish_SecondHand_Title" >
                    <div>
                        <span>
                            <img src="/assets/Trade/Drone.png" alt="layer"/> 产品描述</span>
                    </div>
                    <div>
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                        <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                <span className="Publish_SecondHand_SubTitle">产品标题</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input placeholder="请输入标题" onChange={e=>this.setState({title:e.target.value})} />
                                        </div>
                                </div>
                            )
                        }/>
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                        <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                <span className="Publish_SecondHand_SubTitle">产品描述</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input  placeholder="请输入描述内容" onChange={e=>this.setState({describe:e.target.value})} />
                                        </div>
                                </div>
                            )
                        }/>
                        <div>
                            <span><img src="/assets/Trade/Drone.png" alt="layer"/> 上传无人机实拍图</span>
                        </div>
                        <div>
                            <div className="Certificate_Type_Upload">
                                <div>
                                    <UpCamera disabled={true} title="上传无人机实拍图" src="/assets/Drone/uploadDrone.png"/>
                                </div>
                                <div>
                                    <UpCamera src={this.state.endImg} Change={e=>this.ChangeDronePic(e)} title="点击上传证书背面" />
                                </div>
                            </div>
                            <div className="Certificate_Type_Remark">
                                <span>*</span>
                                <span>请将无人机与遥控置于同一处并拍摄图片（请拍清SN)</span>
                            </div>
                        </div>
                        <div>
                            <span><img src="/assets/Trade/Drone.png" alt="layer"/> 航拍飞行器信息</span>
                        </div>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">无人机类型</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input placeholder="请输入无人机类型" onChange={e=>this.setState({aerocraftType:e.target.value})}/>
                                            </div>
                                    </div>
                                )
                            }/>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">无人机品牌</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                                <Input placeholder="请输入无人机品牌" onChange={e=>this.setState({aerocraftBrand:e.target.value})}/>
                                            </div>
                                    </div>
                                )
                            }/>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">无人机型号</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                                <Input placeholder="请输入无人机型号" onChange={e=>this.setState({aerocraftModel:e.target.value})}/>
                                            </div>
                                    </div>
                                )
                            }/>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">输入SN号</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                                <Input placeholder="请输入SN号" onChange={e=>this.setState({aerocraftSn:e.target.value})}/>
                                            </div>
                                    </div>
                                )
                            }/>
                            <div>
                                <span>有无飞行保险</span>
                                <div>
                                    <Radio.Group >
                                        <Radio value={1} onClick={e=>this.setState({insuranceStatus:0})}>有</Radio>
                                        <Radio value={2} onClick={e=>this.setState({insuranceStatus:1})}>无</Radio>
                                    </Radio.Group>
                                </div>
                            </div>

                            <div className="Certificate_Type_Upload">
                                <div>
                                    <UpCamera disabled={true} title="上传保险单实拍图" src="/assets/Drone/uploadDrone.png"/>
                                </div>
                                <div>
                                    <UpCamera src={this.state.endImg} Change={e=>this.ChangeCAPic(e)} title="点击上传保险单" />
                                </div>
                            </div>
                            <div className="Certificate_Type_Remark">
                                <span>*</span>
                                <span>请将无人机保险截图上传（请务必确保保单SN号认证SN号相同）)</span>
                            </div>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">保险公司</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                                <Input placeholder="请选择" onChange={e=>this.setState({insuranceCompany:e.target.value})}/>
                                            </div>
                                    </div>
                                )
                            }/>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">保险单号</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                                <Input placeholder="请输入保单号" onChange={e=>this.setState({insuranceNumber:e.target.value})}/>
                                            </div>
                                    </div>
                                )
                            }/>
                            <BGContainer color="#f4f5f9" content={
                                (
                                    <div className="Publish_SecondHand_Sub_InfoLine">
                                            <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                                    <span className="Publish_SecondHand_SubTitle">保险有效期</span>
                                            </div>
                                            <div className="Publish_SecondHand_Sub_InfoRight">
                                                <div className="ProductInfo_Out_Row_Body">
                                                    <DatePicker style={{ width: '48%' }}  onChange={e=>this.StartChange(e)}/>
                                                    <span className="ProductInfo_Out_Row_Span">~</span>
                                                    <DatePicker style={{ width: '48%' }}  onChange={e=>this.EndChange(e)}/>
                                                </div>
                                            </div>
                                    </div>
                                )
                            }/>
                        <div className="Publish_SecondHand_Sub_InfoMiddle">
                            <TiggleBtn leftTitle="一口价" rightTitle="可议价" click={e=>this.TigglePrice(e)}/>
                        </div>
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                         <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                            <span className="Publish_SecondHand_SubTitle">价格</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input placeholder="请输入价格"  onChange={e=>this.setState({price:e.target.value})}/>
                                        </div>
                                </div>
                            )
                        }/>
                        {/* <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                         <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                            <span className="Publish_SecondHand_SubTitle">租赁押金</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input placeholder="请输入租赁押金"  onChange={e=>this.setState({cashPledge:e.target.value})}/>
                                        </div>
                                </div>
                            )
                        }/> */}
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                         <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                            <span className="Publish_SecondHand_SubTitle">议价比例</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <div className="flexContainer">
                                                <Input placeholder="请输入议价比例" suffix="" onChange={e=>this.setState({bargainProportion:e.target.value})}/>
                                                {/* <Blank/>
                                                <span>dui</span> */}
                                            </div>
                                        </div>
                                </div>
                            )
                        }/>
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                    <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                            <span className="Publish_SecondHand_SubTitle">交易保险金</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input placeholder="请输入保险金比例" suffix=""  onChange={e=>this.setState({cashDepositProportion:e.target.value})}/>
                                            <Input placeholder="请输入保险金" suffix=""  onChange={e=>this.setState({cashDeposit:e.target.value})}/>
                                        </div>
                                </div>
                            )
                        }/>
                        <div>
                            <span><img src="/assets/Trade/Info.png" alt="layer"/> 你能做到</span>
                        </div>
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                        <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                            <span className="Publish_SecondHand_SubTitle">产品服务</span>
                                        </div>
                                        <div className="Publish_SecondHand_Sub_InfoRight">
                                            <Input placeholder="请输入产品服务" suffix=""  onChange={e=>this.setState({productService:e.target.value})}/>
                                        </div>
                                </div>
                            )
                        }/>
                        <BGContainer color="#f4f5f9" content={
                            (
                                <div className="Publish_SecondHand_Sub_InfoLine">
                                    <div className="Publish_SecondHand_Sub_InfoLeft Publish_SecondHand_BodyPadding">
                                        <span className="Publish_SecondHand_SubTitle">是否包邮</span>
                                    </div>
                                    <div className="Publish_SecondHand_Sub_InfoRight">
                                        <Radio.Group onChange={e=>{this.setState({mail:e.target.value})}}>
                                            <Radio value={0}>是</Radio>
                                            <Radio value={1}>否</Radio>
                                        </Radio.Group>
                                    </div>
                                </div>
                            )
                        }/>
                    </div>
                    {/* <div>
                        <span><img src="/assets/Trade/Drone.png" alt="layer"/> 添加到【飞行器认证】</span>
                        <div>
                            <Radio.Group onChange={this.onChange} value={this.state.value}>
                                <Radio value={1}>是</Radio>
                                <Radio value={2}>否</Radio>
                            </Radio.Group>
                        </div>
                    </div> */}

                    <div className="Publish_SecondHand_Sub_InfoMiddle">
                        <Button style={{width:"12rem"}} type="primary" 
                        shape="round" size="large" onClick={e=>this.Commit(e)}
                        >
                            确认发布
                        </Button>
                    </div>
                </div>
        )
    }
}